Vue.component('tree',{
  template: `
  <div>
    <div class="ul" v-for="item in treeData" :key="item.id">
      <div
        class="li"
        :style="{
          paddingLeft: level * 27 + 'px'
        }"
        @click.stop="clickNode(item)"
      >
        <span v-if="item.type === 'dir'" :class="['icon-triangle', item.isOpen ? 'rotate' : 'rotateFalse']"></span>
        <span>{{ item.name }}</span>
      </div>
      <custom-tree v-if="item.isOpen" :data="item.children" :level="level + 1"> </custom-tree>
    </div>
  </div>
  `,
  name: "tree",
  data(){
    return {
      treeData: null
    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    level: {
      type: Number,
      default: 1
    }
  },
  mounted() {
    this.treeData = this.data;
    this.treeData.forEach((node) => {
      node.level = this.level;
      this.$set(node, "isOpen", true);
    });
  },
  methods: {
    clickNode(node) {
      console.log(node.id)
      node.isOpen = !node.isOpen;
    }
  }
});
